<template>
  <view class="container" style="padding: 0 30rpx 30rpx; background-color: #fff" v-if="isLoaded">
    <!-- 表单 -->
    <view class="content">
      <li-form>
        <li-form-item label="充值类型">
          <li-picker
            v-model="form.depositType"
            :rangeList="[
              { id: 1, text: '充值' },
              { id: 2, text: '充次数' }
            ]"
          />
        </li-form-item>
        <li-form-item label="充值金额" v-if="form.depositType == 1" required>
          <li-input v-model="form.depositMoney" prop="depositMoney" type="number" rule="float" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item v-if="form.depositType == 1" label="赠送金额" required>
          <li-input v-model="form.giveMoney" prop="giveMoney" type="number" rule="float" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item v-if="form.depositType == 2" label="充值次数" required>
          <li-input v-model="form.depositMoney" prop="depositMoney" type="number" rule="int" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item v-if="form.depositType == 2" label="赠送次数" required>
          <li-input v-model="form.giveMoney" prop="giveMoney" type="number" rule="int" @blur="onBlurEvent($event)" />
        </li-form-item>

        <li-form-item label="赠送积分" required>
          <li-input v-model="form.giveIntegral" prop="giveIntegral" type="number" rule="int" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="上级赠送积分" class="fs12" required>
          <li-input class="fs14" v-model="form.upGiveIntegral" prop="upGiveIntegral" type="number" rule="int" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="备注">
          <li-input v-model="form.remark" prop="giveMoney" rule="trim" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="会员分类">
          <li-picker v-model="form.userCategoryId" :rangeList="UserCategoryList" range-key="name" />
        </li-form-item>
        <li-form-item label="状态">
          <li-picker
            v-model="form.depositRuleStatus"
            :rangeList="[
              { id: 1, text: '正常' },
              { id: 2, text: '停用' }
            ]"
          />
        </li-form-item>
        <li-form-item label="是否累加">
          <li-picker
            v-model="form.isAccumulation"
            :rangeList="[
              { id: 1, text: '是' },
              { id: 2, text: '否' }
            ]"
          />
        </li-form-item>
        <li-form-item label="赠送礼券">
          <li-picker v-model="form.couponId" :rangeList="FoodCouponList" range-key="name" />
        </li-form-item>
        <li-form-item label="礼券数量">
          <li-input v-model="form.couponCount" prop="couponCount" type="number" rule="intOrNull" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="开始时间" required>
          <li-date-picker v-model="form.startTime" />
        </li-form-item>
        <li-form-item label="结束时间" required>
          <li-date-picker v-model="form.endTime" />
        </li-form-item>
      </li-form>
      <view style="font-size: 14px; border: 1px solid #ccc; padding: 5px; color: #a3a3a3; border-radius: 10rpx">
        提示1:充值金额和赠送金额都为0时,前台可输入赠送金额；赠送次数为-1,前台可输入赠送次数
        <view style="margin-top: 7px"></view>
        提示2:充值金额和赠送金额都为0时,赠送积分为每元赠送多少积分，次卡的积分赠送在次卡方案设置
        <view style="margin-top: 7px"></view>
        提示3:不选择会员分类时,所有会员都适用该规则
      </view>
    </view>

    <li-bottom-btns :mode="mode" @btnDelClick="btnDelClick" @btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
  </view>
</template>
<script>
import liFormMixin from '../../../mixins/liFormMixin';
import { GetUserDepositRulesById, DelUserDepositRulesById, AddUserDepositRules, EditUserDepositRules, GetUserCategoryList, GetFoodCouponList } from '../../../common/api.js';

import { transferTypeEnum } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum, booleanEnum } from '../../../constants/normalConstants.js';
export default {
  mixins: [liFormMixin],
  async onLoad(options) {
    this.loadEvent(options, this);
  },

  async mounted() {
    let today = new Date();
    today.setDate(today.getDate() + 1);
    let formattedDate = `${today.getFullYear()}-${('0' + (today.getMonth() + 1)).slice(-2)}-${('0' + today.getDate()).slice(-2)}`;

    this.mountedEvent(this, {
      depositType: 0,
      depositRuleStatus: 1,
      depositMoney: 0,
      depositType: 1,
      giveIntegral: 0,
      giveMoney: 0,
      isAccumulation: 1,
      upGiveIntegral: 0,
      startTime: formattedDate,
      endTime: formattedDate,
      userCategoryId: null,
      couponCount: null,
      remark: ''
    });
  },
  data() {
    return {
      modeEnum,
      booleanEnum,
      subject: '充值规则', // 主题
      rootRoute: 'workbench',
      routeName: 'rechargeRules',
      mode: 'add', // 模式
      isLoaded: false,
      id: null,
      /* 表单 */
      form: null,
      /* 弹窗 */

      // 数据转换器
      transferRules: [
        {
          name: 'depositMoney',
          type: transferTypeEnum.float
        },
        {
          name: 'giveMoney',
          type: transferTypeEnum.float
        },
        {
          name: 'giveIntegral',
          type: transferTypeEnum.int
        },
        {
          name: 'upGiveIntegral',
          type: transferTypeEnum.int
        },
        {
          name: 'upGiveIntegral',
          type: transferTypeEnum.int
        },
        {
          name: 'couponCount',
          type: transferTypeEnum.intOrNull
        }
      ],
      //表单校验规则
      rules: [
        {
          name: 'startTime',
          checkType: checkerType.endNotNull,
          errorMsg: '开始时间不能为空~~'
        },
        {
          name: 'endTime',
          checkType: checkerType.endNotNull,
          errorMsg: '结束时间不能为空~~'
        }
      ],
      lock: false, // 节流锁

      /* 额外数据 */
      UserCategoryList: [],
      FoodCouponList: []
      /* 额外校验规则 */
      /* 额外转换器 */
    };
  },

  methods: {
    onBlurEvent(e) {
      this.formBlur(e, this);
    },

    async getData() {
      this.form = (await GetUserDepositRulesById(this.id)).data;
    },

    async getOtherData() {
      // ...
      this.UserCategoryList = (await GetUserCategoryList()).data.list;
      this.FoodCouponList = (await GetFoodCouponList()).data.list;
    },

    async insertData() {
      return AddUserDepositRules(this.form);
    },

    async delData() {
      return await DelUserDepositRulesById(this.id);
    },

    async editData() {
      return await EditUserDepositRules(this.form);
    },

    async btnDelClick() {
      await this.formDelete(this);
    },

    async btnEditOrSaveSubmitClick() {
      await this.formInsertOrEdit(this);
    }

    //方法放上面
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
</style>
